<!--  -->
<template>
    <div class="lucky-draw">
        <!-- 顶部 -->
        <div class="ls-card header">
            <el-alert
                class="xxl"
                title="温馨提示：进行中的幸运抽奖活动可以修改名称和活动时间。"
                type="info"
                :closable="false"
                show-icon
            >
            </el-alert>

            <div class="m-t-16">
                <el-form ref="form" inline :model="form" label-width="70px" size="small">
                    <el-form-item label="活动名称">
                        <el-input class="" v-model="form.name" placeholder="请输入活动名称"> </el-input>
                    </el-form-item>

                    <el-form-item label="活动时间">
                        <date-picker :start-time.sync="form.start_time" :end-time.sync="form.end_time" />
                    </el-form-item>

                    <el-button size="small" type="primary" @click="getList(1)">查询</el-button>
                    <el-button size="small" @click="onReset()">重置</el-button>
                    <!-- 导出按钮 -->
                    <export-data class="m-l-10" :method="apiLuckyDrawLists" :param="form" :pageSize="pager._size">
                    </export-data>
                </el-form>
            </div>
        </div>

        <!--  -->
        <div class="ls-card m-t-16">
            <el-tabs v-model="form.status" v-loading="pager.loading" @tab-click="getList(1)">
                <el-tab-pane :label="`全部(${extend.all})`" name=" ">
                    <lucky-draw-pane v-model="pager.lists" :pager="pager" @refresh="getList()" />
                </el-tab-pane>
                <el-tab-pane lazy :label="`未开始(${extend.wait})`" name="0">
                    <lucky-draw-pane v-model="pager.lists" :pager="pager" @refresh="getList()" />
                </el-tab-pane>
                <el-tab-pane lazy :label="`进行中(${extend.ing})`" name="1">
                    <lucky-draw-pane v-model="pager.lists" :pager="pager" @refresh="getList()" />
                </el-tab-pane>
                <el-tab-pane lazy :label="`已结束(${extend.end})`" name="2">
                    <lucky-draw-pane v-model="pager.lists" :pager="pager" @refresh="getList()" />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { RequestPaging } from '@/utils/util'
import { apiLuckyDrawLists, apiLuckyDrawDelete, apiLuckyDrawEnd, apiLuckyDrawStart } from '@/api/marketing/lucky_draw'
import { PageMode } from '@/utils/type'
import LuckyDrawPane from '@/components/lucky-draw/lucky-draw-pane.vue'
import DatePicker from '@/components/date-picker.vue'
import ExportData from '@/components/export-data/index.vue'
@Component({
    components: {
        LuckyDrawPane,
        DatePicker,
        ExportData
    }
})
export default class LuckyDraw extends Vue {
    apiLuckyDrawLists = apiLuckyDrawLists // 传递给导出组件的api

    // 分页查询
    pager: RequestPaging = new RequestPaging()

    form = {
        status: ' ', // 活动状态 0-未开始 1-进行中 2-已结束，默认：全部
        name: '',
        start_time: '',
        end_time: ''
    }

    extend = {
        all: 0,
        wait: 0,
        ing: 0,
        end: 0
    }

    // 重置
    onReset() {
        ;(this.form.status = ' '),
            (this.form.name = ''),
            (this.form.start_time = ''),
            (this.form.end_time = ''),
            this.getList()
    }

    // 获取列表
    getList(page?: number): void {
        page && (this.pager.page = page)
        this.pager
            .request({
                callback: apiLuckyDrawLists,
                params: {
                    ...this.form
                }
            })
            .then((res: any) => {
                this.extend = res?.extend
            })
            .catch(() => {})
    }

    created() {
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.lucky-draw {
    .header {
        padding-bottom: 0px;
    }
}
</style>
